---
title: Styling Emblor
description: Learn how to style Emblor components using the styling API
---

## Overview

The **TagInput** component now supports a flexible styling API that allows you to apply custom class names to the components that make up the **TagInput** and their various subcomponents. The **styleClasses** prop accepts an object where keys correspond to subcomponent names and values are the custom class names you can apply. This approach provides fine-grained control over the styling of each part of the **TagInput** component and its children.

## Tag Input Anatomy

<br/>
```tsx
<TagInput>
  └─<div> <!-- inlineTagsContainer -->
     ├─<TagList> <!-- part of TagList anatomy -->
     └─<Input> <!-- main input field -->
  └─<Autocomplete> <!-- if autocomplete is enabled -->
     └─<Popover> <!-- part of Autocomplete anatomy -->
  └─<TagPopover> <!-- if popover for tags is used -->
     └─<Popover> <!-- part of TagPopover anatomy -->
  └─<div> <!-- Additional UI elements like tag count or clear button -->
```

## Styling

### Inline Tags Container

This container holds the inline tags displayed by the **TagInput**.

<br />
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Prop</TableHead>
      <TableHead>Description</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      {/* <TableCell className="border-r bg-background">Inline Tags Container</TableCell> */}
      <TableCell className="border-r bg-background">inlineTagsContainer</TableCell>
      <TableCell className="bg-background">
        The container that holds the inline tags displayed by the **TagInput**.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>
<br />

### Tag Popover

The popover that appears for additional tag interactions such as nesting the tag list.

<br />
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Prop</TableHead>
      <TableHead>Description</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r bg-background">popoverContent</TableCell>
      <TableCell className="bg-background">Styles the content area of the tag popover</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">popoverTrigger</TableCell>
      <TableCell className="bg-background">Styles the trigger button of the popover.r</TableCell>
    </TableRow>
  </TableBody>
</Table>
<br />

```tsx
<TagPopover>
  └─<Popover>
     ├─<div> <!-- trigger -->
     └─<PopoverContent> <!-- content -->
        └─<TagList> <!-- Uses TagList anatomy -->

```

<br />

### Tag List

Styles for the list that contains and displays the tags.

<br />
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Prop</TableHead>
      <TableHead>Description</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r bg-background">container</TableCell>
      <TableCell className="bg-background">Styles the outer container of the tag list.</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">sortableList</TableCell>
      <TableCell className="bg-background">Styles the sortable list area within the tag list.</TableCell>
    </TableRow>
  </TableBody>
</Table>
<br />

```tsx
<TagList>
  └─<div> <!-- container -->
     └─<SortableList> <!-- sortableList -->
        └─<SortableItem> <!-- Each tag wrapped in sortable item -->
           └─<Tag> <!-- Individual tag -->

```

<br />

### Autocomplete

Styles related to the autocomplete functionality.

<br />
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Prop</TableHead>
      <TableHead>Description</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r bg-background">command</TableCell>
      <TableCell className="bg-background">Styles the Command wrapper used for autocomplete..</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">popoverTrigger</TableCell>
      <TableCell className="bg-background">Styles the trigger for the autocomplete popover.r</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">popoverContent</TableCell>
      <TableCell className="bg-background">Styles the content area within the autocomplete popover.r</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">commandList</TableCell>
      <TableCell className="bg-background">Styles the CommandList compnent in the autocomplete component</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">commandList</TableCell>
      <TableCell className="bg-background">Styles the CommandList compnent in the autocomplete component</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">commandGroup</TableCell>
      <TableCell className="bg-background">Styles the CommandGroup compnent in the autocomplete component</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">commandGroup</TableCell>
      <TableCell className="bg-background">Styles the CommandGroup compnent in the autocomplete component</TableCell>
    </TableRow>
  </TableBody>
</Table>
<br />

```tsx
<Autocomplete>
  └─<Popover>
     ├─<popoverTrigger> <!-- popoverTrigger -->
     └─<PopoverContent> <!-- popoverContent -->
        └─<Command> <!-- command -->
           ├─<CommandList> <!-- commandList -->
           │  ├─<CommandGroup> <!-- commandGroup -->
           │  │  └─<CommandItem> <!-- commandItem -->
           └─<CommandEmpty> <!-- Displayed when no commands are available -->

```

<br />

### Tag

Styles specific to each tag within the list.

<br />
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Prop</TableHead>
      <TableHead>Description</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r bg-background">body</TableCell>
      <TableCell className="bg-background">Styles the body of each individual tag.</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r bg-background">closeButton</TableCell>
      <TableCell className="bg-background">Styles the close button on each tag.</TableCell>
    </TableRow>
  </TableBody>
</Table>
<br />

```tsx
<Tag>
  └─<span> <!-- body -->
     ├─<text> <!-- tag text content -->
     └─<Button> <!-- closeButton -->

```

<br />

### Clear All Button

Styles for the clear all button that appears when the **clearAll** prop is set to true.

<br />

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Prop</TableHead>
      <TableHead>Description</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r bg-background">clearAllButton</TableCell>
      <TableCell className="bg-background">
        Styles the clear all button that appears when the **clearAll** prop is set to true.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>
<br />

## Usage

Here's how you can use the **styleClasses** prop to style different subcomponents:

<br />

```tsx
<TagInput
  styleClasses={{
    input: 'border border-gray-300 p-2',
    inlineTagsContainer: 'bg-gray-200 p-2 rounded',
    tagPopover: {
      popoverContent: 'bg-white shadow-lg',
      popoverTrigger: 'text-blue-500 hover:text-blue-600',
    },
    tagList: {
      container: 'bg-red-100',
      sortableList: 'p-1',
    },
    autoComplete: {
      command: 'bg-blue-100',
      popoverTrigger: 'bg-green-200',
      popoverContent: 'p-4',
      commandList: 'list-none',
      commandGroup: 'font-bold',
      commandItem: 'cursor-pointer hover:bg-gray-100',
    },
    tag: {
      body: 'flex items-center gap-2',
      closeButton: 'text-red-500 hover:text-red-600',
    },
    clearAllButton: 'text-red-500 hover:text-red-600',
  }}
  // other props
/>
```
